import React from 'react';
import {connect} from 'dva';
import {Link, browserHistory} from 'dva/router';
import {Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message} from 'antd';
import moment from 'moment'
import OperatorConstant from "../../../utils/OperatorConstant";
import CapitalDetail from '../../../components/capital/CapitalDetail'
import RightBox from "../../../components/commons/RightBox";
import RightConstants from '../../../utils/RightConstants';
const R = require('ramda');
const dateFormat = 'YYYY-MM-DD';
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;

export default connect(({capital}) => ({capital}))(
    Form.create()(class claim extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
            }
        }

        componentDidMount() {
            this.props.dispatch({
                type: 'capital/getStatementsList',
                payload: {
                    status: "2",
                }
            });
        }

        handleEdit = (record, type) => {
            this.props.dispatch({type: 'capital/getStatementById', payload: {id: record.id}});
            this.props.dispatch({type: 'capital/getApprovalById', payload: {id: record.id}});
            this.props.dispatch({type: 'capital/getPayById', payload: {id: record.id}});
            this.props.dispatch({type: 'capital/getCurrentNodeDetail', payload: {id: record.id, code: "statement"}});

            this.capitalDetail.handleOpen(type);
        }



        handleSearch = () => {
            let values = this.props.form.getFieldsValue();
            let newPage = this.props.capital.page;
            newPage.page = 1;

            let beginTime = "";
            let endTime = "";

            if (values.time != null && values.time != undefined) {
                if(values.time.length >=2 ){
                    if(values.time[0] != ''){
                        beginTime = values.time[0].format(dateFormat);
                    }
                    if(values.time[1] != ''){
                        endTime = values.time[1].format(dateFormat);
                    }

                }
            }

            this.props.dispatch({
                type: 'capital/getStatementsList',
                payload: {
                    customerno: values.customerno,
                    stateno: values.stateno,
                    status: values.status,
                    beginTime: beginTime,
                    endTime: endTime,
                    minamount: values.minamount,
                    maxamount: values.maxamount,
                    creator: values.creator,
                    page: newPage

                }
            });
        };

        handleExport = () => {
            let values = this.props.form.getFieldsValue();

            let times = values.time;
            let status = values.status;
            let stateno = values.stateno;
            let customerno = values.customerno;
            let minamount = values.minamount;
            let maxamount = values.maxamount;

            this.props.dispatch({
                type: "capital/exportStatementList",
                payload: {
                    beginTime: R.isNil(times) || R.isEmpty(times) ? "" : times[0].format(dateFormat),
                    endTime: R.isNil(times) || R.isEmpty(times) ? "" : times[1].format(dateFormat),
                    status: R.isNil(status) ? "" : status,
                    stateno: R.isNil(stateno) ? "" : stateno,
                    customerno: R.isNil(customerno) ? "" : customerno,
                    minamount: R.isNil(minamount) ? "" : minamount,
                    maxamount: R.isNil(maxamount) ? "" : maxamount,
                }
            })
        }

        columns = [
            {title: '供应商编码', dataIndex: 'companyCode', key: 'companyCode', width: '150px', fixed: true},

            {title: '供货商名称', dataIndex: 'companyName', key: 'companyName'},

            {title: '结算单号', dataIndex: 'stateno', key: 'stateno',},

            {title: '实际支付(CNY)', dataIndex: 'transferamount', key: 'transferamount'},

            {title: '收款人', dataIndex: 'accname', key: 'accname'},

            {title: '银行账号', dataIndex: 'accno', key: 'accno'},

            {title: '申请人', dataIndex: 'creatorName', key: 'creatorName'},

            {title: '结算日期', dataIndex: 'createtime', key: 'createtime'},

            {title: '操作', width: '100px', fixed: 'right', key: 'key_oprator',

                render: (text, record, index) => {

                    if(record.status == 2){
                        return (
                            <span>
                              <RightBox resource={RightConstants.APPROVAL.PAY_APPROVAL}>
                              <a href="#" onClick={this.handleEdit.bind(this, record, OperatorConstant.approval)}>审核</a></RightBox>
                            </span>
                        );
                    }else if(record.status == 3){
                        return (
                            <span>
                                <a href="#" onClick={this.handleEdit.bind(this, record, OperatorConstant.view)}>查看</a>
                            </span>
                        );
                    } else {
                        return (
                            <span>
                                <a href="#" onClick={this.handleEdit.bind(this, record, OperatorConstant.view)}>查看</a>
                            </span>
                        );
                    }
                }
            }
        ];

        render () {
            let dataSouce = R.isNil(this.props.capital.dataSource) ? {} : this.props.capital.dataSource;
            let formItemLayout = {labelCol: {span: 6}, wrapperCol: {span: 18}};
            const { getFieldDecorator } = this.props.form;
            let values = this.props.form.getFieldsValue();

            let beginTime = "";
            let endTime = "";

            if (values.time != null && values.time != undefined) {
                if(values.time.length >=2 ){
                    if(values.time[0] != ''){
                        beginTime = values.time[0].format(dateFormat);
                    }
                    if(values.time[1] != ''){
                        endTime = values.time[1].format(dateFormat);
                    }

                }
            }
            let pagination = {
                showTotal: total => `共 ${total} 条数据`,
                pageSize: this.props.capital.page.size,
                total: this.props.capital.page.totalRow,
                showSizeChanger: true,
                current:this.props.capital.page.page,
                onShowSizeChange: (current, size) => {
                    let newPage = this.props.capital.page;
                    newPage.size = size;
                    newPage.page = 1;
                    this.props.dispatch({
                        type: 'capital/getStatementsList',
                        payload: {
                            customerno: values.customerno,
                            stateno: values.stateno,
                            status: values.status,
                            beginTime: beginTime,
                            endTime: endTime,
                            minamount: values.minamount,
                            maxamount: values.maxamount,
                            creator: values.creator,
                            page: newPage
                        }
                    });
                },
                onChange: (pageNumber, pageSize) => {
                    let newPage = this.props.capital.page;
                    newPage.page = pageNumber;
                    this.props.dispatch({
                        type: 'capital/getStatementsList',
                        payload: {
                            customerno: values.customerno,
                            stateno: values.stateno,
                            status: values.status,
                            beginTime: beginTime,
                            endTime: endTime,
                            minamount: values.minamount,
                            maxamount: values.maxamount,
                            creator: values.creator,
                            page: newPage
                        }
                    });
                }
            }
            return (
                <div>

                    <Form >
                        <div style={{width: 1250}}>
                            <Row >
                                <Col span={8}>
                                    <FormItem {...formItemLayout} label={'供应商编码'}>
                                        {getFieldDecorator('customerno', {})(
                                            <Input style={{width: 200}}/>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem  {...formItemLayout} label={'申请时间'}>
                                        {getFieldDecorator('time', {})(
                                            <RangePicker
                                                style={{width:'300px'}}
                                                showTime={{ format: 'YYYY-MM-DD' }}
                                                format="YYYY-MM-DD"
                                                placeholder={['开始时间', '结束时间']}
                                            />
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row >
                                <Col span={8}>
                                    <FormItem {...formItemLayout} label={'结算单号'}>
                                        {getFieldDecorator('stateno', {})(
                                            <Input style={{width: 200}}/>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem  {...formItemLayout} label={'转账金额'}>
                                        {getFieldDecorator('minamount', {})(
                                            <InputNumber style={{width:'150px'}} placeholder="最小金额" />
                                        )}
                                    </FormItem>
                                </Col>

                                <Col span={5} style={{marginLeft:'-190px'}}>
                                    <FormItem {...formItemLayout} label={'至'} >
                                        {getFieldDecorator('maxamount', {})(
                                            <InputNumber style={{width:'150px'}}   placeholder="最大金额" />
                                        )}
                                    </FormItem>
                                </Col>

                            </Row>

                            <Row>
                                <Col span={8}>
                                    <FormItem
                                        {...formItemLayout}
                                        label={'状态'}
                                    >
                                        {getFieldDecorator('status', {
                                            initialValue: "2"
                                        })(
                                            <RadioGroup style={{width: 800}} >
                                                <Radio value='2'>待审核</Radio>
                                                <Radio value='3'>审核失败</Radio>
                                                <Radio value='4'>待付款</Radio>
                                                <Radio value='5'>已付款</Radio>
                                                <Radio value='6'>付款失败</Radio>
                                            </RadioGroup>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={5} style={{textAlign: 'center'}}>
                                    <Button type="primary" icon="search" onClick={this.handleSearch.bind(this)}>查询</Button>
                                </Col>
                                <Col span={4}>
                                    <RightBox resource={RightConstants.APPROVAL.EXPORTING_PAYMENG_LIST}>
                                        <Button type="primary" onClick={this.handleExport.bind(this)}>导出付款审核列表</Button>
                                    </RightBox>
                                </Col>
                            </Row>
                        </div>
                    </Form>

                    <Table rowKey="id" dataSource={this.props.capital.list} columns={this.columns} bordered={true}
                           size={'middle'}  pagination={pagination}/>

                    <CapitalDetail wrappedComponentRef={(inst) => this.capitalDetail = inst} dispatch={this.props.dispatch}
                                 capital = {this.props.capital}
                                 handleSearch = {this.handleSearch}
                                 dataSource={this.props.capital.dataSource}/>


                </div>
            )
        }
    })


)
